<template>
  <div class='apply-contain'>
    <el-form>
      <el-form-item label='申请邮箱' prop='email'>
        <el-input v-model='applyEmail' placeholder='请输入申请邮箱(必填)'>
          <template #prepend>
            <el-button :icon="Message" style='width: 40px;'/>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label='站点名称'>
        <el-input v-model='applyName' placeholder='请输入站点名称(必填)'>
          <template #prepend>
            <el-button :icon="Monitor" style='width: 40px;'/>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label='站点图标'>
        <el-input v-model='applyAvatar' placeholder='请输入站点图标(必填)'>
          <template #prepend>
            <el-button :icon="PictureRounded" style='width: 40px;'/>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label='站点地址'>
        <el-input v-model='applyAddress' placeholder='请输入站点地址(必填)'>
          <template #prepend>
            <el-button :icon="Location" style='width: 40px;'/>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label='站点介绍'>
        <el-input v-model='applyIntro' placeholder='请输入站点介绍(必填)'>
          <template #prepend>
            <el-button :icon="Notification" style='width: 40px;'/>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label='站点截图'>
        <el-input v-model='applyScreenshot' placeholder='请输入站点截图(可选)'>
          <template #prepend>
            <el-button :icon="Crop" style='width: 40px;'/>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <div class='apply-submit'>
      <!-- 极验组件 -->
      <div id="captcha" :class="captchaConfig.config.product === 'bind' ? 'hideHeight' : ''">
        <GeetestCaptcha :captcha-config="captchaConfig" />
      </div>
      <div class='sub-btn'>
        <button class='primary' type='submit' @click='submitApply'>提交友链申请</button>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, inject, reactive, toRefs } from 'vue'
import api from '@/api/api'
import { ElMessage, ElNotification } from 'element-plus'
import { Message, Monitor, PictureRounded, Location, Notification, Crop } from '@element-plus/icons-vue'
import GeetestCaptcha from '@/components/GeetestCaptcha.vue'

declare global {
  interface Window {
    [propName: string]: never;
  }
}
export default defineComponent({
  name: 'FriendApply',
  components: { GeetestCaptcha },
  computed: {
    Crop() {
      return Crop
    },
    Notification(){
      return Notification
    },
    Location(){
      return Location
    },
    PictureRounded() {
      return PictureRounded
    },
    Monitor() {
      return Monitor
    },
    Message() {
      return Message
    }
  },
  emits: ['value-change'],
  setup(props, { emit }) {
    const reactiveData = reactive({
      applyEmail: '' as any,
      applyName: '' as any,
      applyAvatar: '' as any,
      applyAddress: '' as any,
      applyIntro: '' as any,
      applyScreenshot: '' as any,
      captchaConfig: {
        config: {
          captchaId: inject('captchaId'),
          product: "float",
        },
        handler: captchaHandler,
      }
    })
    const submit = () => {
      if (reactiveData.captchaConfig.config.product === "bind") {
        if (window.captchaObj) {
          (window as any).captchaObj.showCaptcha()
        } else {
          ElMessage({
            message: '请等待验证初始化完成',
            type: 'warning'
          })
          return false
        }
      } else {
        validate()
      }
    }
    const submitApply = () => {
      submit()
      api.postApply({
        applyEmail: reactiveData.applyEmail,
        applyName: reactiveData.applyName,
        applyAvatar: reactiveData.applyAvatar,
        applyAddress: reactiveData.applyAddress,
        applyIntro: reactiveData.applyIntro,
        applyScreenshot: reactiveData.applyScreenshot
      }).then(({ data }) => {
        if (data.flag) {
          ElMessage({
            message: '申请提交成功',
            type: 'success'
          })
          emit('value-change', false)
        } else {
          ElMessage({
            message: data.message,
            type: 'error'
          })
        }
      })
    }
    const validate = () => {
      if (reactiveData.applyEmail.trim()===''){
        ElMessage({
          message: '请输入邮箱',
          type: 'warning'
        })
        return
      }
      if (!/\S+@\S+\.\S+/.test(reactiveData.applyEmail)) {
        ElMessage({
          message: '请输入正确的邮箱格式',
          type: 'warning'
        })
        return
      }
      if (reactiveData.applyName.trim() == '') {
        ElMessage({
          message: '名称为空',
          type: 'warning'
        })
        return
      }
      if (reactiveData.applyAvatar.trim() == '') {
        ElMessage({
          message: '头像为空',
          type: 'warning'
        })
        return
      }
      if (!/^(http(s)?:\/\/)?(www\.)?[\w-\.]+\.[a-zA-Z]{2,}(\/)?/.test(reactiveData.applyAddress)) {
        ElMessage({
          message: '请输入正确的网站地址',
          type: 'warning'
        })
        return
      }
      if (reactiveData.applyIntro.trim() == '') {
        ElMessage({
          message: '简介为空',
          type: 'warning'
        })
        return
      }
      let result = (window as any).captchaObj.getValidate();
      if (!result) {
        ElMessage({
          message: '请先完成验证!',
          type: 'warning'
        })
        return
      }
    }
    // 新增极验
    function captchaHandler(captchaObj: any) {
      (window as any).captchaObj = captchaObj;
      captchaObj
        .appendTo("#captcha")
        .onReady(function () {
          // console.log("ready");
        })
        .onNextReady(function () {
          // console.log("nextReady");
        })
        .onBoxShow(function () {
          // console.log("boxShow");
        })
        .onError(function (e: any) {
          console.log(e);
        })
        .onSuccess(function () {
          if (reactiveData.captchaConfig.config.product === "float") {
            validate()
          }
        });
    }
    return {
      ...toRefs(reactiveData),
      submitApply
    }
  }
})
</script>

<style lang='scss' scoped>
#captcha {
    height: 50px;

    &.hideHeight {
        height: 0;
    }
}

.apply-submit {
    display: flex;
    justify-content: space-between;
}
</style>
